<template>
	<!-- 我的帖子 -->	
	<view class="bg-ff">
		<view class="main">
			<view class="search">
				<view class="search-input">
					<text class="yzb yzb-search"></text>
					<input class="text-normal" type="text" :value="searchValue" :placeholder="placeholder" @input="searchInput" />
				</view>			
			</view>
			<view class="posts-wap">
				<view class="p-label flex">
					<view class="flex-1">
						<view class="fc-66 fs-26 s-lab">生活百科</view>
					</view>
					<image class="p-img" src="https://web.suqzp.com/public/del.png"></image>
				</view>
				<view class="post-main">
					<view class="fc-33 fs-32 pad-top-20">{{postData.title}}</view>
					<view class="fs-28 fc-66 pad-top-15">{{postData.content}}</view>
					<view class="report-img flex mar-top-20">
						<view class="img-style" v-for="(item,index) in postData.img">
							<image :src="item.src"></image>
						</view>					
					</view>
					<view class="flex jcsb">
						<view class="fs-26 fc-99">
							<image class="lok-icon" src="https://web.suqzp.com/public/look.png"></image>
							{{postData.looknum}}
						</view>
						<view class="fs-26 fc-99">
							<image class="lok-icon" src="https://web.suqzp.com/public/zf.png"></image>
							{{postData.forwardnum}}
						</view>
						<view class="fs-26 fc-99">
							<image class="lok-icon" src="https://web.suqzp.com/public/zan.png"></image>
							{{postData.fabulounum}}
						</view>
						<view class="fs-26 fc-99">
							<image class="lok-icon" src="https://web.suqzp.com/public/info.png"></image>
							{{postData.commentnum}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				postData:{
					title:'广州市-希尔顿酒店发布一个新活动,可获得88员优惠',
					content:'自古以来，中国人崇尚阳刚之气和尚武精神。今天的中国如此地大物博，便是由于几千年来，先人不断锐意进取，建功于域外，才使得我们华夏民族建立起东方最大的国家。中情局暗中下的圈套！',
					img:[{
						src:'https://web.suqzp.com/static/q.jpg'
					},{
						src:'https://web.suqzp.com/static/2.jpg'
					},{
						src:'https://web.suqzp.com/static/q.jpg'
					}],
					looknum:100,
					forwardnum:2,
					fabulounum:10,
					commentnum:200
				}
			}
		},
		methods:{
			
		}
	}
</script>
<style lang="scss">
	page{
		background: #f6f6f6;
	}
	.main{
		width: 92%;
		padding: 4%;
	}
	.search {
		height:90rpx;
		width: 100%;
		display: flex;
		flex-direction: row;	
		color: #ffffff;
		align-items: center;		
		.search-input {
			z-index: 5;
			position: fixed;
			top: 28rpx;
			width: 686rpx;
			height: 82rpx;
			border-radius: 50upx;
			display: flex;
			flex-direction: row;
			background: #F7F9F9;
			align-items: center;
			.yzb-search {
				color: $font-color-999;
				font-size:35rpx;
				margin:3rpx 10rpx 0 24rpx;
			}
			input{
				width: 90%;
				font-size: 28upx;
				color: $font-color-333;
				padding: 0 36rpx 0 0;
				height: 82rpx;
			}
			image {
				width: 35upx;
				height: 35upx;
				margin-right: 10upx;
			}
		}		
	}
	.posts-wap{
		margin-top: 36rpx;
		.p-label{			
			.s-lab{
				padding: 13rpx 18rpx;
				background: #FFEFED;
				display: inline-block;
			}
			.p-img{
				width: 40rpx;
				height: 40rpx;
				display: block;
			}
		}
		.report-img{
			.img-style{
				margin: 0 0 24rpx 12rpx;
				width: 220rpx;
				height: 210rpx;
				border-radius:8rpx;
				display: flex;
				align-items: center;
				overflow: hidden;
				image{
					width: 100%;
				}
			}
			.img-style:nth-child(3n+1) {
				margin: 0 0rpx 24rpx 0;
			}
		}
		.lok-icon{
			width:44rpx;
			height: 44rpx;
			display: inline-block;
			margin-right: 6rpx;
			position: relative;
			top: 10rpx;
		}
	}
	
</style>
